<template>
  <el-drawer
      :model-value="store.drawer"
      direction="rtl"
      :before-close="store.toggleDrawer"
      destroy-on-close
  >
    <template #header>
      <div class="left">
        {{ type }}人员
      </div>
    </template>
    <el-form
        ref="ruleFormRef"
        style="max-width: 600px"
        :model="store.employeeInfo"
        status-icon
        :rules="rules"
        label-width="20%"
        scroll-to-error
        scroll-into-view-options
        :disabled = "type===DRAWER_TYPE.detail"
        v-loading="store.employeeDrawerLoading"
    >
      <el-form-item label="手机号" prop="phone">
        <el-input v-model.number="store.employeeInfo.phone" utocomplete="off" maxlength="11"/>
      </el-form-item>
      <el-form-item label="姓名" prop="name">
        <el-input v-model="store.employeeInfo.name" autocomplete="off" minlength="2" maxlength="11"/>
      </el-form-item>
      <el-form-item label="性别" prop="sex" >
          <el-radio-group v-model="store.employeeInfo.sex">
            <el-radio v-for="(value, key) in SEX" :value="parseInt(key)" :label="key">{{value}}</el-radio>
          </el-radio-group>
      </el-form-item>
      <el-form-item label="岗位" prop="port">
        <el-select v-model="store.employeeInfo.port" placeholder="请选择人员岗位">
          <el-option v-for="(value, key) in sysStore.PORT" key={{key}} :label="value" :value="parseInt(key)" />
        </el-select>
      </el-form-item>
      <el-form-item label="邮箱" prop="email">
        <el-input v-model="store.employeeInfo.email"/>
      </el-form-item>
      <el-form-item label="入职时间" prop="entry_date">
        <el-date-picker
            v-model="store.employeeInfo.entry_date"
            type="date"
            placeholder="请选择入职时间"
            format="YYYY/MM/DD"
            value-format="YYYYMMDD"
        />
      </el-form-item>
      <el-form-item label="离职时间" prop="leave_date">
        <el-date-picker
            v-model="store.employeeInfo.leave_date"
            type="date"
            placeholder="请选择离职时间"
            format="YYYY/MM/DD"
            value-format="YYYYMMDD"
        />
      </el-form-item>
      <el-form-item label="状态" prop="status">
        <el-select v-model="store.employeeInfo.status" placeholder="请选择人员状态">
          <el-option v-for="(value, key) in EMPLOYEE_STATUS" key={{key}} :label="value" :value="parseInt(key)" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm(ruleFormRef)">
          提交
        </el-button>
        <el-button @click="resetForm(ruleFormRef)">取消</el-button>
      </el-form-item>
    </el-form>
  </el-drawer>
</template>

<script setup>
import {reactive, ref, toRaw} from "vue";
import {DRAWER_TYPE, EMPLOYEE_STATUS} from "@/dict/dict-employee";
import {useEmployeeStore} from "@/store/employee";
import {SEX} from "@/dict/dict-sys";
import {useSysDictStore} from "@/store/store-sys-dict-pinia";
import {validateEmail, validatePhone} from "@/utils/validator";

const props = defineProps({
  type: {
    type: String,
    validator: (value) => Object.values(DRAWER_TYPE).includes(value)
  },
  data: Object
})

const store = useEmployeeStore();
const sysStore = useSysDictStore()
const ruleFormRef = ref()

const validateLeaveDate = (rule, value, callback) => {

  if (store.employeeInfo.entry_date && value && value < store.employeeInfo.entry_date) {
    return callback(new Error('离职时间不能早于入职时间'));
  }

  return callback();
}

const rules = reactive({
  phone: [{ required: true, trigger: 'blur', validator: validatePhone}],
  name: [{ required: true, message: '姓名不能为空', trigger: ['blur']}],
  sex: [{ required: true, message: '请选择人员性别', trigger: 'blur'}],
  port: [{ required: true, message: '请选择人员岗位', trigger: 'blur'}],
  email: [{ required: true, trigger: 'blur', validator: validateEmail}],
  entry_date: [{ required: true, message: '请选择入职时间', trigger: 'blur'}],
  leave_date: [{ trigger: 'submit', validator: validateLeaveDate}],
  status: [{ required: true, message: '请选择人员状态', trigger: 'blur'}],
})

const submitForm = async (formEl) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      if(props.type === DRAWER_TYPE.add){
        store.employeeInfo.phone = store.employeeInfo.phone.toString()
        store.addEmployee(toRaw(store.employeeInfo))
      }else{
        store.modEmployee(toRaw(store.employeeInfo))
      }

    } else {
      console.log('error submit!', fields)
    }
  })
}

const resetForm = (formEl) => {
  if (!formEl) return
  formEl.resetFields()
  store.toggleDrawer()
}
</script>

<style scoped lang="less">
.left {
  text-align: left; /* 设置标题左对齐 */
}
/* 添加一个自定义类来隐藏上下箭头 */
.no-arrows {
  display: none;
}
</style>